import { FC, memo, useState, useEffect } from 'react';
import { Box, Tabs, TabList, TabPanels, TabPanel, Tab } from '@chakra-ui/react';
import AlbumList from '@/views/discover/c-views/rangking/c-cpns/sider/AlbumList/index'; // 引入 AlbumList 组件
import TextTag from '@/components/TextTag';
interface IProps {
    fetchAlbums: (type: string) => Promise<Album[]>;
}
interface Album {
    id: number;
    name: string;
    picUrl: string;
    bio: string;
}

const tagTexts = ["官方","特色","场景"]
const SiderBar: FC<IProps> = ({ fetchAlbums }) => {
    // 为每个标签页创建独立的专辑状态
    const [albumsOfficial, setAlbumsOfficial] = useState<Album[]>([]);
    const [albumsFeatured, setAlbumsFeatured] = useState<Album[]>([]);
    const [albumsScene, setAlbumsScene] = useState<Album[]>([]);

    const [activeIndex, setActiveIndex] = useState(0);
    // 当活动标签或组件首次加载时，获取相应的专辑
    useEffect(() => {
        const fetchAllAlbums = async () => {
            const officialData = await fetchAlbums('official');
            const featuredData = await fetchAlbums('featured');
            const sceneData = await fetchAlbums('scene');

            setAlbumsOfficial(officialData);
            setAlbumsFeatured(featuredData);
            setAlbumsScene(sceneData);
        };

        fetchAllAlbums();
    }, [fetchAlbums]);

    return (
        <Box mt={4}>
            <Tabs isFitted variant="enclosed" 
            boxShadow={"0 0 10px rgba(0, 0, 0, 0.1)"}

            onChange={(index) => {
            }}>
                
                <TabList 
                border="none"
                display="flex" 
                    justifyContent="space-around"
                    pb={4}
                    pt={4}
                >
                    {tagTexts.map((item,index)=>{
                        return <TextTag key={index} isActive={activeIndex === index} onClick={()=>setActiveIndex(index)} >{item}</TextTag>
                    })}


                </TabList>
                <Box w="80%" h="2px" bgColor={"gray.100"} display="flex"   m="0 auto"></Box>
                <TabPanels width="100%" pb={4} >
                    <TabPanel p={0} mt={2} >
                        <AlbumList   albums={albumsOfficial} />
                    </TabPanel>
                    <TabPanel p={0} mt={2}>
                        <AlbumList albums={albumsFeatured} />
                    </TabPanel>
                    <TabPanel p={0} mt={2}>
                        <AlbumList albums={albumsScene} />
                    </TabPanel>
                </TabPanels>
            </Tabs>
        </Box>
    );
};

export default memo(SiderBar);